<template>
  <div>
    <div v-if="this.$route.meta.hiddens">
      <header class="header">
        <div class="title">
          <img src="@/assets/images/01_11.png" class="img_zuo" @click="clickBack" />
          <div>住改非房屋</div>
        </div>
      </header>
      <div class="menPhis-main">
        <div class="menPhis-main-header">{{ name }}</div>
        <div class="menPhis-main-footer">
          <div class="menPhis-box" v-for="(item, index) in ZGFList" :key="index" @click="jumpCommunity(item)">
            <div class="menPhis-box-header">
              <img src="@/assets/images/zgffw.png" class="menPhis-img">
            </div>
            <div class="menPhis-box-text">{{ item.mc }}</div>
          </div>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
  import terminal from '@/assets/js/terminal';
  import { Toast } from 'vant';
  export default {
    name: "ZGFList",
    data () {
      return {
        userId: 0,
        name: '',
        ZGFList: []
      };
    },
    mounted () {
      this.userId = Number(localStorage.getItem('userId'));
      this.inQuire();
    },
    methods: {
      //  查询
      inQuire () {
        let that = this;
        let params = { userId: that.userId };
        that.axios.get(`${that.$global_msg.Url.host}/partroInspection/selectZgfByUserId`, { params })
          .then(res => {
            if (res.data.code === 200) {
              that.ZGFList = res.data.rows.list;
              that.name = res.data.rows.name;
            } else {
              Toast(res.data.msg || '获取数据失败,请刷新页面重试')
            }
          }).catch( e => terminal._error(e));
      },
      //  返回
      clickBack () {
        this.$router.back();
      },
      //  跳转小区
      jumpCommunity (data) {
        this.$router.push({
          path: '/ordinary_inspection/ZGFList/communityList',
          query: { id: data.id, name: data.mc }
        })
      }
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .menPhis-main {
    min-height: 100vh;
    padding-top: 1.8519rem;
  }
</style>
<style scoped>
  .menPhis-main .menPhis-main-header {
    background-color: #f2f2f2;
    padding: 0.25rem 0.3rem;
  }
  .menPhis-main .menPhis-main-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    align-self: baseline;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-header {
    padding: 0.4rem 0.5rem;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-header .menPhis-img {
    width: 100%;
    height: auto;
  }
  .menPhis-main .menPhis-main-footer .menPhis-box .menPhis-box-text {
    padding: 0 0.15rem;
    font-size: 0.35rem;
    text-align: center;
  }
</style>
